import styled, {css, keyframes} from 'styled-components'
const rotateKey = keyframes`
  from{transform: rotate(0deg)} 
  to{transform: rotate(360deg)}
`
const rotateAnimation = css`
  animation: ${rotateKey} 4s linear infinite;
`

const leftRightScrollKey = keyframes`
  //0%{
  //  transform: translateX(15%);
  //  left: 0;
  //}
  //10%{
  //  transform: translateX(15%);
  //  left: 0;
  //}
  //80%{
  //  transform: translateX(-115%);
  //  left: 100%;
  //}
  //100%{
  //  transform: translateX(-115%);
  //  left: 100%;
  //}
  0%{
    transform: translateX(0%);
    left: 0;
  }
  20%{
    transform: translateX(0%);
    left: 0;
  }
  80%{
    transform: translateX(-100%);
    left: 100%;
  }
  100%{
    transform: translateX(-100%);
    left: 100%;
  }

`
const leftRightScrollKey2 = keyframes`
  from{
    transform: translateX(100%);
  }
  to{
    transform: translateX(-100%);
  }
`
const leftRightScroll = css`
  animation: ${leftRightScrollKey} ${(props)=>props.width/30}s linear alternate infinite;
`
export const InfoContainer = styled.div`
  position: relative;
  width: 20%;
  height: 100%;
  .BFC{
    position: relative;
    width: 100%;
    height: 100%;
    &>*{
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
  .bfc_flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
`
export const Info = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  &>*{
    flex:100;
  }
`
export const CoverImgContainer = styled.div`
  position: relative;
  height: 100%;
  flex: 75;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`
export const CoverImg = styled.img`
  position: relative;
  height: 65%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  user-select: none;
  -webkit-user-drag: none;
  border: 2px solid #939393;

  &.played {
    ${rotateAnimation};
  }
`
export const SongTitleContainer = styled.div`
  position: relative;
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

`
export const SongTitle = styled.div`
  position: absolute;
  width: 100%;
  font-size: 0.9rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  mask: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 10%,rgba(255, 255, 255, 1) 90%,rgba(255, 255, 255, 0) 100%);

  .songTitle {
    position: relative;
    height: 100%;
    width: fit-content;
    text-align: right;
    padding: 0 0.5rem;
    &.scroll{
      ${leftRightScroll}
    }
`
export const ArtistContainer = styled.div`
  position: relative;
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  
  //::-webkit-scrollbar{
  //  display: none;
  //}
`
export const ArtistWrapper = styled.div`
  position: absolute;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  &,&>*{
    font-size: 0.8rem;
    color: #b6b6b6;
  }
`
export const Artist = styled.span`
  position: relative;
  width:80%;
  overflow: hidden;
  ////display: inline-block;
  //overflow-x: scroll;
  ::-webkit-scrollbar {
    display: none;
  }
`